<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人简历模板</title>
    <style>
        /* 全局样式 */
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f5f7fa;
            color: #333;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }

        /* 简历容器样式 */
        .resume-container {
            width: 80%;
            max-width: 900px;
            background-color: #fff;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
            border-radius: 20px;
            overflow: hidden;
            animation: fadeIn 0.8s ease-out;
            position: relative;
            margin: 40px 0;
        }

        /* 头部样式 */
        .header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            text-align: center;
            padding: 60px 0;
            position: relative;
            z-index: 1;
            clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
        }

        .header::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect fill="white" opacity="0.1" width="50" height="50" x="0" y="0"></rect><rect fill="white" opacity="0.1" width="50" height="50" x="50" y="50"></rect></svg>');
            background-size: 30px 30px;
            z-index: -1;
        }

        .header h1 {
            margin: 0;
            font-size: 48px;
            font-weight: 700;
            letter-spacing: 2px;
            text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.2);
            animation: slideDown 0.6s ease-out;
        }

        .header p {
            margin: 20px 0 0;
            font-size: 22px;
            color: rgba(255, 255, 255, 0.9);
            font-style: italic;
            animation: slideUp 0.6s ease-out;
        }

        /* 章节样式 */
        .section {
            padding: 40px;
            border-bottom: 1px solid #e0e0e0;
            transition: background-color 0.3s ease;
        }

        .section:last-child {
            border-bottom: none;
        }

        .section:hover {
            background-color: #fafafa;
        }

        .section h2 {
            color: #667eea;
            font-size: 28px;
            margin-bottom: 25px;
            border-bottom: 3px solid #667eea;
            padding-bottom: 8px;
            animation: fadeInLeft 0.6s ease-out;
            position: relative;
        }

        .section h2::after {
            content: "";
            position: absolute;
            bottom: -3px;
            left: 0;
            width: 30%;
            height: 3px;
            background: #764ba2;
        }

        /* 标签样式 */
        label {
            font-size: 18px;
            font-weight: 600;
            color: #555;
            margin-right: 10px;
            display: inline-block;
            margin-bottom: 0;
        }

        label::after {
            content: "：";
        }

        /* 输入框和文本域样式 */
        input,
        textarea {
            width: calc(100% - 120px);
            border: none;
            border-bottom: 2px solid #ddd;
            font-size: 18px;
            transition: all 0.3s ease;
            background-color: transparent;
            resize: none;
            min-height: 20px;
            line-height: 1.5;
            box-sizing: border-box;
            overflow: hidden;
            display: inline-block;
        }

        input:focus,
        textarea:focus {
            outline: none;
            border-color: #667eea;
            box-shadow: 0 2px 0 0 rgba(102, 126, 234, 0.2);
        }

        input:valid,
        textarea:valid {
            border: none;
        }

        /* 基本信息包装器样式 */
        .basic-info-wrapper {
            display: flex;
            gap: 30px;
        }

        /* 基本信息样式 */
        .basic-info {
            flex: 2;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
        }

        .basic-info div {
            display: flex;
            align-items: center;
        }

        /* 联系信息样式 */
        .contact-info {
            grid-column: span 2;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            margin-top: 40px;
        }

        .contact-info div {
            display: flex;
            align-items: center;
        }

        /* 照片容器样式 */
        .photo-container {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
        }

        #photo {
            width: 200px;
            height: 260px;
            object-fit: cover;
            cursor: pointer;
            border: 3px solid #ddd;
            border-radius: 10px;
            transition: all 0.3s ease;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            margin-bottom: 15px;
        }

        #photo:hover {
            border-color: #667eea;
            transform: translateY(-5px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
        }

        #photo-upload {
            display: none;
        }

        .photo-upload-label {
            color: #667eea;
            cursor: pointer;
            font-weight: 600;
            transition: color 0.3s ease;
            text-align: center;
        }

        .photo-upload-label:hover {
            color: #764ba2;
            text-decoration: underline;
        }

        /* 两列布局样式 */
        .two-column-row {
            display: grid;
            grid-template-columns: 2fr 1fr;
            gap: 20px;
        }

        .two-column-row div {
            display: flex;
            align-items: center;
        }

        /* 三列布局样式 */
        .three-column-row {
            display: grid;
            grid-template-columns: 2fr 1fr 1fr;
            gap: 20px;
        }

        .three-column-row div {
            display: flex;
            align-items: center;
        }

        /* 日期范围样式 */
        .date-range {
            display: flex;
            align-items: center;
        }

        .date-range span {
            color: #777;
        }

        .date-range div {
            display: flex;
            align-items: center;
        }

        /* 打印按钮样式 */
        .print-button {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 15px 30px;
            border: none;
            border-radius: 30px;
            cursor: pointer;
            font-size: 18px;
            transition: all 0.3s ease;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            position: fixed;
            top: 50%;
            right: 30px;
            display: flex;
            align-items: center;
            gap: 8px;
            z-index: 100;
        }

        .print-button:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
        }

        .print-button:active {
            transform: translateY(0);
        }

        /* 新增添加按钮样式 */
        .add-button {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 20px;
            cursor: pointer;
            font-size: 16px;
            transition: all 0.3s ease;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            margin-top: 20px;
        }

        .add-button:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
        }

        .add-button:active {
            transform: translateY(0);
        }

        /* 打印样式 */
        @media print {
            body {
                background-color: white;
            }
            .resume-container {
                box-shadow: none;
                border-radius: 0;
                width: 100%;
                max-width: 100%;
                margin: 0;
            }
            .print-button {
                display: none;
            }
            .add-button {
                display: none;
            }
            .header {
                clip-path: none;
                padding: 40px 0;
            }
        }

        /* 动画效果 */
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(-20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes slideDown {
            from {
                opacity: 0;
                transform: translateY(-50px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes slideUp {
            from {
                opacity: 0;
                transform: translateY(50px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes fadeInLeft {
            from {
                opacity: 0;
                transform: translateX(-50px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }
    </style>
</head>

<body>
    <!-- 简历容器 -->
    <div class="resume-container">
        <!-- 头部 -->
        <div class="header">
            <h1>个人简历</h1>
            <p id="slogan">加载中...</p>
        </div>
        <!-- 基本信息章节 -->
        <div class="section">
            <h2>基本信息</h2>
            <div class="basic-info-wrapper">
                <!-- 基本信息 -->
                <div class="basic-info">
                    <div>
                        <label for="name">姓名</label>
                        <input type="text" id="name" placeholder="请输入姓名">
                    </div>
                    <div>
                        <label for="gender">性别</label>
                        <input type="text" id="gender" placeholder="请输入性别">
                    </div>
                    <div>
                        <label for="age">年龄</label>
                        <input type="text" id="age" placeholder="请输入年龄">
                    </div>
                    <div>
                        <label for="hometown">籍贯</label>
                        <input type="text" id="hometown" placeholder="请输入籍贯">
                    </div>
                    <div>
                        <label for="height">身高</label>
                        <input type="text" id="height" placeholder="请输入身高">
                    </div>
                    <div>
                        <label for="weight">体重</label>
                        <input type="text" id="weight" placeholder="请输入体重">
                    </div>
                    <div>
                        <label for="blood-type">血型</label>
                        <input type="text" id="blood-type" placeholder="请输入血型">
                    </div>
                    <div>
                        <label for="city">城市</label>
                        <input type="text" id="city" placeholder="请输入所在城市">
                    </div>
                </div>
                <!-- 照片容器 -->
                <div class="photo-container">
                    <img id="photo" src="../img/head_default.jpg" alt="2寸照片"
                        onclick="document.getElementById('photo-upload').click()">
                    <input type="file" id="photo-upload" accept="image/*" onchange="displayPhoto(this)">
                </div>
            </div>
            <!-- 联系信息 -->
            <div class="contact-info">
                <div>
                    <label for="contact">联系方式</label>
                    <input type="text" id="contact" placeholder="请输入联系方式">
                </div>
                <div>
                    <label for="email">电子邮箱</label>
                    <input type="text" id="email" placeholder="请输入电子邮箱">
                </div>
            </div>
        </div>
        <!-- 教育背景章节 -->
        <div class="section">
            <h2>教育背景</h2>
            <div class="two-column-row">
                <div>
                    <label for="school">学校名称</label>
                    <input type="text" id="school" placeholder="请输入学校名称">
                </div>
                <div>
                    <label for="edu-time">毕业时间</label>
                    <input type="text" id="edu-time" placeholder="请输入毕业时间">
                </div>
            </div>
            <div class="two-column-row">
                <div>
                    <label for="major">所学专业</label>
                    <input type="text" id="major" placeholder="请输入专业">
                </div>
                <div>
                    <label for="degree">最高学历</label>
                    <input type="text" id="degree" placeholder="请输入学历">
                </div>
            </div>
            <div>
                <label for="edu-details">相关课程</label>
                <br>
                <textarea id="edu-details" placeholder="请输入相关课程" rows="3"></textarea>
            </div>
        </div>
        <!-- 工作经历章节 -->
        <div class="section" id="work-experience">
            <h2>工作经历</h2>
            <div class="work-entry">
                <div class="three-column-row">
                    <div>
                        <label for="company">公司名称</label>
                        <input type="text" id="company" placeholder="请输入公司名称">
                    </div>
                    <div>
                        <label for="position">任职岗位</label>
                        <input type="text" id="position" placeholder="请输入任职岗位">
                    </div>
                </div>
                <div class="date-range">
                    <div style="flex: 1;">
                        <label for="work-start-time">入职时间</label>
                        <input type="text" id="work-start-time" placeholder="请输入入职时间">
                    </div>
                    <div style="flex: 1;">
                        <label for="work-end-time">离职时间</label>
                        <input type="text" id="work-end-time" placeholder="请输入离职时间">
                    </div>
                </div>
                <label for="work-details">工作内容</label>
                <br>
                <textarea id="work-details" placeholder="请输入工作内容" rows="4"></textarea>
            </div>
            <button class="add-button" onclick="addWorkEntry()">添加</button>
        </div>
        <!-- 项目经验章节 -->
        <div class="section" id="project-experience">
            <h2>项目经验</h2>
            <div class="project-entry">
                <div class="three-column-row">
                    <div>
                        <label for="project-name">项目名称</label>
                        <input type="text" id="project-name" placeholder="请输入项目名称">
                    </div>
                    <div>
                        <label for="project-role">项目职责</label>
                        <input type="text" id="project-role" placeholder="请输入项目职责">
                    </div>
                </div>
                <div class="date-range">
                    <div style="flex: 1;">
                        <label for="project-start-time">开始时间</label>
                        <input type="text" id="project-start-time" placeholder="请输入开始时间">
                    </div>
                    <div style="flex: 1;">
                        <label for="project-end-time">结束时间</label>
                        <input type="text" id="project-end-time" placeholder="请输入结束时间">
                    </div>
                </div>
                <label for="project-details">项目内容</label>
                <br>
                <textarea id="project-details" placeholder="请输入项目内容" rows="4"></textarea>
            </div>
            <button class="add-button" onclick="addProjectEntry()">添加</button>
        </div>
        <!-- 技能专长章节 -->
        <div class="section">
            <h2>技能专长</h2>
            <textarea id="skills" placeholder="请输入专业技能、语言能力、工具使用等" rows="3"></textarea>
        </div>
        <!-- 个人总结章节 -->
        <div class="section">
            <h2>个人总结</h2>
            <textarea id="summary" placeholder="请输入个人总结" rows="4"></textarea>
        </div>
    </div>
    <!-- 打印按钮 -->
    <button class="print-button" onclick="printResume()">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
            stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <polyline points="6 9 6 2 18 2 18 9"></polyline>
            <path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"></path>
            <rect x="6" y="14" width="12" height="8"></rect>
        </svg>
        打印简历
    </button>
    <script>
        // 打印简历函数
        function printResume() {
            // 隐藏打印按钮和添加按钮
            document.querySelector('.print-button').style.display = 'none';
            const addButtons = document.querySelectorAll('.add-button');
            addButtons.forEach(button => {
                button.style.display = 'none';
            });
            // 调用浏览器打印功能
            window.print();
            // 打印完成后重新显示按钮
            setTimeout(() => {
                document.querySelector('.print-button').style.display = 'flex';
                addButtons.forEach(button => {
                    button.style.display = 'inline-block';
                });
            }, 1000);
        }

        // 显示照片函数
        function displayPhoto(input) {
            const photo = document.getElementById('photo');
            if (input.files && input.files[0]) {
                const reader = new FileReader();
                reader.onload = function (e) {
                    photo.src = e.target.result;
                };
                reader.readAsDataURL(input.files[0]);
            }
        }

        // 自动调整输入框高度函数
        function adjustInputHeight(input) {
            input.style.height = 'auto';
            input.style.height = (input.scrollHeight) + 'px';
        }

        // 为所有输入框添加自动调整高度功能
        document.querySelectorAll('input, textarea').forEach(input => {
            input.addEventListener('input', function () {
                adjustInputHeight(this);
            });
            // 初始化高度
            adjustInputHeight(input);
        });

        // 标语数组
        const slogans = [
            "经验是智慧的基石，创新是突破的引擎",
            "跨界思维是职场核心竞争力，数据是新时代的决策语言",
            "技术应当服务于人性，解决方案的价值在于改变生活",
            "创意需要商业落地，真正的专业体现在可量化的结果",
            "执行力是把梦想变为现实的转换器，细节决定成败",
            "真诚服务是最持久的商业模式，口碑是无形却最坚固的资产",
            "理解需求本质比实现需求更重要，用户视角是产品设计的原点",
            "数字讲述企业真相，风险意识是稳健前行的保障",
            "设计是功能与美学的平衡，商业价值源于用户体验",
            "优化是永无止境的追求，效率提升来自每个环节的精进",
            "全球化思维，本土化行动，文化差异是机遇而非障碍",
            "危机中藏着转机，适应力比预测力更重要",
            "终身学习不是选择而是必需，知识迭代速度决定职业生命力",
            "资源整合能力是现代社会的超能力，协同产生指数效应",
            "商业价值与社会价值不是选择题，可持续发展才是真发展",
            "代际差异带来创新视角，传统与新兴的碰撞产生新机会",
            "技术应当赋能于人而非替代，人机协同创造最大价值",
            "失败是最高效的老师，反思是将挫折转化为财富的过程",
            "传播的本质是价值传递，复杂问题简单化才是真本事",
            "多维能力构建抗脆弱性，跨界融合创造独特优势",
            "长期主义是应对浮躁时代的定心丸，复利效应存在于每个专业领域",
            "认知边界决定职业高度，主动破圈是持续成长的密钥",
            "简单的事情重复做就是专家，重复的事情用心做就是赢家",
            "与其预测风向，不如打造无论什么风都能扬帆的船",
            "压力是能力的测量仪，舒适区外才有真实的成长曲线",
            "人脉不是认识多少人，而是你能为多少人创造价值",
            "时间是最公平的资本，精力管理比时间管理更重要",
            "决策质量决定人生密度，80%的精力应该花在20%的决策上",
            "沟通不是信息的传递，而是认知的同步与情感的共鸣",
            "领导力的本质是激发他人潜能，团队成功才是真正的成功",
            "专业深度的价值在于关键时刻的不可替代性",
            "创新常诞生于不同领域的交叉地带，保持好奇就是保持竞争力",
            "错误是进步的阶梯，但复盘才是登高的电梯",
            "个人品牌是这个时代的职业通行证，信誉需要点滴积累",
            "工作与生活的平衡不是时间分配，而是能量管理的艺术",
            "拒绝是专注的前提，战略放弃比盲目努力更需要勇气",
            "情绪是思维的天气系统，自我觉察是职业发展的隐藏技能",
            "第一性原理思维：回归本质才能突破表象的束缚",
            "工具是思维的延伸，掌握新工具就是扩展认知边疆",
            "谦逊是学习的最佳姿态，自信是行动的必要条件",
            "系统思维看问题，杠杆思维做事情",
            "未来属于能快速学习的人，学习速度就是职业加速度",
            "给予比索取建立更牢固的关系，利他最终成就的是自己",
            "微小改进的持续积累，终将形成质的飞跃",
            "逆境是才能的磨刀石，应对挑战的能力决定职业天花板",
            "信息过载时代，筛选比收集更重要，思考比记忆更关键",
            "真正的效率不是做得更快，而是做更对的事",
            "多元思维模型是应对复杂世界的工具箱",
            "职业发展不是爬梯子而是攀岩，每个支点都是自定义的",
            "影响力=专业能力×表达力×可信度，三者缺一不可"
        ];


        // 随机选择标语
        const randomIndex = Math.floor(Math.random() * slogans.length);
        const sloganElement = document.getElementById('slogan');
        sloganElement.textContent = slogans[randomIndex];

        // 添加工作经历输入框函数
        function addWorkEntry() {
            const workExperience = document.getElementById('work-experience');
            const newEntry = document.createElement('div');
            newEntry.classList.add('work-entry');
            newEntry.innerHTML = `
                <div class="three-column-row">
                    <div>
                        <label for="company">公司名称</label>
                        <input type="text" placeholder="请输入公司名称">
                    </div>
                    <div>
                        <label for="position">任职岗位</label>
                        <input type="text" placeholder="请输入任职岗位">
                    </div>
                </div>
                <div class="date-range">
                    <div style="flex: 1;">
                        <label for="work-start-time">入职时间</label>
                        <input type="text" placeholder="请输入入职时间">
                    </div>
                    <div style="flex: 1;">
                        <label for="work-end-time">离职时间</label>
                        <input type="text" placeholder="请输入离职时间">
                    </div>
                </div>
                <label for="work-details">工作内容</label>
                <br>
                <textarea placeholder="请输入工作内容" rows="4"></textarea>
            `;
            workExperience.insertBefore(newEntry, workExperience.lastChild);
            // 为新输入框添加自动调整高度功能
            newEntry.querySelectorAll('input, textarea').forEach(input => {
                input.addEventListener('input', function () {
                    adjustInputHeight(this);
                });
                // 初始化高度
                adjustInputHeight(input);
            });
        }

        // 添加项目经验输入框函数
        function addProjectEntry() {
            const projectExperience = document.getElementById('project-experience');
            const newEntry = document.createElement('div');
            newEntry.classList.add('project-entry');
            newEntry.innerHTML = `
                <div class="three-column-row">
                    <div>
                        <label for="project-name">项目名称</label>
                        <input type="text" placeholder="请输入项目名称">
                    </div>
                    <div>
                        <label for="project-role">项目职责</label>
                        <input type="text" placeholder="请输入项目职责">
                    </div>
                </div>
                <div class="date-range">
                    <div style="flex: 1;">
                        <label for="project-start-time">开始时间</label>
                        <input type="text" placeholder="请输入开始时间">
                    </div>
                    <div style="flex: 1;">
                        <label for="project-end-time">结束时间</label>
                        <input type="text" placeholder="请输入结束时间">
                    </div>
                </div>
                <label for="project-details">项目内容</label>
                <br>
                <textarea placeholder="请输入项目内容" rows="4"></textarea>
            `;
            projectExperience.insertBefore(newEntry, projectExperience.lastChild);
            // 为新输入框添加自动调整高度功能
            newEntry.querySelectorAll('input, textarea').forEach(input => {
                input.addEventListener('input', function () {
                    adjustInputHeight(this);
                });
                // 初始化高度
                adjustInputHeight(input);
            });
        }
    </script>
</body>

</html>    